<template>
  <div class="viewDome">
    <div class="viewDome-top">
      <span>
        开敞度分析
      </span>
      <el-popover
          class="viewDome-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键在模型中选择分析区域的圆心即可">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="viewDome-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="viewDome-data">
      <el-form ref="viewDomeData" :model="viewDomeObj" label-width="140px">
        <el-form-item label="展示半径">
          <el-input-number v-model="viewDomeObj.radius" :step="10" :min="1"></el-input-number>
        </el-form-item>
        <el-form-item label="透明度">
          <el-input-number v-model="viewDomeObj.opacity" :step="0.1" :min="0" :max="1"></el-input-number>
        </el-form-item>
        <el-form-item label="可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="viewDomeObj.visibleColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="不可见区域颜色" class="color">
          <el-color-picker color-format="rgb" v-model="viewDomeObj.invisibleColor"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="viewDome-btn">
      <el-button @click="selectViewDome()">选择区域</el-button>
      <el-button @click="delViewDome()">删除</el-button>
      <el-button @click="closeViewDome()">关闭</el-button>
      <el-button @click="saveViewDome()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/viewDome';
</style>
<script>
/* eslint-disable */

export default {
  name: "viewDome",
  data() {
    return {
      viewDomeObj: {
        //展示半径，单位：米，取值范围：[0.01~任意正数]，默认值：500
        radius: 500,
        //透明度，取值范围：[0~1]，默认值：0.5
        opacity: 0.5,
        //可见区域的颜色
        visibleColor: 'rgb(241,9,9)',
        //不可见区域的颜色
        invisibleColor: 'rgb(65,243,4)',
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectViewDome() {
      let visibleColor = this.extractRGBComponents(this.viewDomeObj.visibleColor)
      let invisibleColor = this.extractRGBComponents(this.viewDomeObj.invisibleColor)
      let obj = {
        radius: this.viewDomeObj.radius,
        opacity: this.viewDomeObj.opacity,
        visibleColor: visibleColor,
        invisibleColor: invisibleColor,
      }
      __g.tools.startViewDomeAnalysis(obj);
    },
    delViewDome() {
      __g.tools.stopViewDomeAnalysis();
    },
    closeViewDome() {
      this.$emit('close-popup');
      this.reloadViewDome()
    },
    reloadViewDome() {
      this.viewDomeObj = {
        radius: 500,
        opacity: 0.5,
        visibleColor: 'rgb(241,9,9)',
        invisibleColor: 'rgb(65,243,4)',
      }
    },
    saveViewDome() {
      this.$message.success("开发中")
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadViewDome()
  },
};
</script>